<template>
  <view class="pay-success-page">
    <!-- 状态栏占位 -->
    <view class="status-bar"></view>
    
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="nav-back" @click="goBack">
        <image class="back-icon" src="/static/Images/pay/Fanhui.png" mode="aspectFit"></image>
      </view>
      <text class="nav-title">支付结果</text>
    </view>
    
    <!-- 支付成功内容 -->
    <view class="success-content">
      <!-- 成功图标 -->
      <view class="success-icon-wrapper">
        <image class="success-icon" src="/static/Images/pay/Zhifuchenggong.png" mode="aspectFit"></image>
      </view>
      
      <!-- 成功文字 -->
      <view class="success-text">
        <text class="success-title">支付成功!</text>
        <text class="success-subtitle">您已完成支付</text>
        <text class="success-desc">感谢您对平台的支持</text>
      </view>
    </view>
    
    <!-- 底部按钮 -->
    <view class="bottom-buttons">
      <view class="btn-wrapper">
        <button class="btn btn-secondary" @click="viewOrder">查看订单</button>
      </view>
      <view class="btn-wrapper">
        <button class="btn btn-primary" @click="orderAgain">再来一单</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      
    }
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    },
    
    // 查看订单
    viewOrder() {
      // 跳转到订单页面
      uni.showToast({
        title: '查看订单功能待开发',
        icon: 'none'
      })
    },
    
    // 再来一单
    orderAgain() {
      // 返回首页或商品页面
      uni.reLaunch({
        url: '/pages/index'
      })
    }
  }
}
</script>

<style scoped>
.pay-success-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

/* 状态栏占位 */
.status-bar {
  height: var(--status-bar-height, 44px);
  background-color: #ffffff;
}

/* 导航栏 */
.nav-bar {
  height: 44px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  position: relative;
  padding: 0 16px;
}

.nav-back {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  width: 20px;
  height: 20px;
}

.nav-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  font-weight: 600;
  color: #333333;
}

/* 支付成功内容 */
.success-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
}

.success-icon-wrapper {
  margin-bottom: 40px;
}

.success-icon {
  width: 5rem;
  height: 5rem;
}

.success-text {
  text-align: center;
}

.success-title {
  display: block;
  font-size: 24px;
  font-weight: 600;
  color: #333333;
  margin-bottom: 12px;
}

.success-subtitle {
  display: block;
  font-size: 16px;
  color: #666666;
  margin-bottom: 8px;
}

.success-desc {
  display: block;
  font-size: 14px;
  color: #999999;
}

/* 底部按钮 */
.bottom-buttons {
  padding: 20px 24px 40px;
  margin-bottom: 20rem;
}

.btn-wrapper {
  margin-bottom: 16px;
}

.btn-wrapper:last-child {
  margin-bottom: 0;
}

.btn {
  width: 100%;
  height: 48px;
  border-radius: 24px;
  font-size: 16px;
  font-weight: 500;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-secondary {
  background-color: #ffffff;
  color: #333333;
  border: 1px solid #e0e0e0;
}

.btn-primary {
  background-color: #ff4757;
  color: #ffffff;
}

.btn-secondary:active {
  background-color: #f5f5f5;
}

.btn-primary:active {
  background-color: #e63946;
}
</style>